<template>
  <div class="goods-item" @click="itemClick">
    <img :src="showImg" alt="" @load="goodsItemLoad">
    <div class="goods-info">
      <p>{{goodsItem.title}}</p>
      <span class="price">{{goodsItem.price}}</span>
      <img src="~assets/images/common/shoucang.svg" alt="" >
      <span class="collect">{{goodsItem.cfav}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodsListItem",
  props: {
    goodsItem: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    showImg(){

      // return this.goodsItem.show.img || this.goodsItem.image
      return this.goodsItem.img || this.goodsItem.image || this.goodsItem.show.img
      // return  this.goodsItem.img
    }

  },
  methods: {
    itemClick(){
      // const itemId = this.goodsItem.iid || this.goodsItem.item_id
      this.$router.push('/Detail/' + this.goodsItem.iid)
    },
    goodsItemLoad(){
        this.$emit('goodsItemLoad')
    }
  }
}
</script>

<style scoped>
.goods-item{
  padding-bottom: 40px;
  position: relative;
  width: 48%;
}
.goods-item img{
  width: 100%;
  border-radius: 5px;
}
.goods-info{
  font-size: 12px;
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  overflow: hidden;
  text-align: center;
}
.goods-info img{
  width: 14px;
  height: 14px;
  margin-left: 7px;
  padding-top: 3px;
}
.goods-info p{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 3px;
}
.goods-info price{
  color: var(--color-high-text);
  margin-right: 20px;
}
.goods-info collect{
  position: relative;
}
/*.goods-info collect::before{*/
/*  content: ' ';*/
/*  position: absolute;*/
/*  left: -15px;*/
/*  top: -1px;*/
/*  width: 14px;*/
/*  height: 14px;*/
/*  !*background: url("~assets/images/tabbar/category_active.svg")  0 0 /14px 14px;*!*/
/*}*/
</style>
